<template>
  <main>
    <swiper-container
      class="swiper-container"
      ref="mainSwiper"
      :autoplay="swiperOptions.autoplay"
      @init="init"
      :grid="true"
      :slidesPerView="4"
      :spaceBetween="-400"
    >
      <swiper-slide v-pre>
        <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">锁具和装载</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
      <swiper-slide v-pre>
       <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">设备/船舶规格</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
      <swiper-slide v-pre>
       <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">车辆运输</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
      <swiper-slide v-pre>
       <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">海洋工程</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
      <swiper-slide v-pre>
       <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">设备/船舶规格</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
      <swiper-slide v-pre>
       <img src="../assets//page/lunchuan.png" alt="" />
        <p class="fleettit">设备/船舶规格</p>
        <p class="fleettext">在今人信服的方法之前有效地格可扩展门户产品化.</p>
      </swiper-slide>
    </swiper-container>
  </main>
</template>

<script setup>
import { register } from "swiper/element/bundle";
register(); // 注册 swiper 组件,如果安装方法使用的是 cdn,则不需要这一步,也不需要上方的引入
const swiperOptions = {
  autoplay: {
    delay: 1000,
    enabled: true,
  },
};
const init = () => {
  console.log("1");
};
</script>

<style>
.fleettit{
 margin: 30px 0 20px 0;
 box-sizing: border-box;
 font-weight: bold;
}
.fleettext{
 color: #62646C;
}
@media screen and (max-width: 1024px) {
  .fleettext{
    display: none;
  }
  .fleettit{
    display: none;
  }
}
</style>